/*
 * @Author: wurangkun
 * @Date: 2024-05-20 10:03:53
 * @LastEditTime: 2024-05-22 17:57:11
 * @LastEditors: wurangkun
 * @FilePath: \flutter_example\lib\widgets\JButton.dart
 * @Description: 
 */
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class AnimatedButton extends StatefulWidget {
  const AnimatedButton(
      {super.key,
      required this.text,
      this.onTap,
      this.style,
      this.padding = 16,
      this.borderRadius = 20,
      this.width = 200,
      this.height = 100});

  final String text;
  final double borderRadius;
  final double width;
  final double height;
  final double padding;
  final TextStyle? style;
  final void Function()? onTap;
  @override
  State<AnimatedButton> createState() => _AnimatedButtonState();
}

class _AnimatedButtonState extends State<AnimatedButton>
    with SingleTickerProviderStateMixin {
  late double _scale;
  late AnimationController _controller;
  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 150),
      lowerBound: 0.0,
      upperBound: 0.1,
    )..addListener(() {
        setState(() {});
      });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  void _onTapDown(TapDownDetails details) {
    _controller.forward();
  }

  void _onTapUp(TapUpDetails details) {
    _controller.reverse();
  }

  void _onTapCancel() {
    _controller.reverse();
  }

  @override
  Widget build(BuildContext context) {
    _scale = 1 - _controller.value;
    return GestureDetector(
      onTapDown: _onTapDown,
      onTapUp: _onTapUp,
      onTapCancel: _onTapCancel,
      onTap: widget.onTap,
      child: Transform.scale(
        scale: _scale,
        child: _animatedButtonUI,
      ),
    );
  }

  Widget get _animatedButtonUI => Container(
        height: widget.height.h,
        width: widget.width.w,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(100),
          boxShadow: [
            BoxShadow(
              color: const Color(0x80FF9700),
              blurRadius: 60.0.w,
              offset: Offset(8.w, 16.h),
            ),
          ],
          gradient: const LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: [
              Color(0xFFFFCC00),
              Color(0xFFFFAA22),
            ],
          ),
        ),
        child: Center(
          child: Text(widget.text,
              style: widget.style ??
                  TextStyle(
                    fontSize: 32.sp,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  )),
        ),
      );
}
